<!DOCTYPE html>
<html>
<head>
	<title>Bus/总线/发布订阅/观察者模式</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		.fade-enter,
		.fade-leave-to {
			opacity: 0;
		}
		.fade-enter-active,
		.fade-leave-active {
			transition: opacity 1s;
		}
		
		
	</style>
</head>
<body>
	<div id="app">
		<transition name="fade" mode="in-out" >  
			<!-- mode里的值决定发生过渡时的先后状态，如in-out,待另外一个元素显现时另一个元素才会隐去 -->
		
			
			<child v-if="show" key="one">
			
			</child>

			<child-one v-else key="two"> </child-one>
			<!-- 记住，加key值很重要，不加的话浏览器会复用div将不会有过渡效果 -->
		</transition>


		<!-- 组件的话，可以用动态组件<component :is="组件名">来实现 -->
		
		<button @click="handle">改变</button>
		
		
	</div>
</body>
<script type="text/javascript">

	Vue.component('child',{
		template:"<div>child</div>"
	})
	Vue.component('child-one',{
		template:"<div>child-two</div>"
	})
	
	

	var vm = new Vue({
		el:"#app",
		data:{
			show:true
	
		},
		methods:{
			handle:function() {
				this.show = (this.show == true) ? false : true;
			},
			
		}

	})



		
</script>
</html>